<script>
import { onMounted, reactive, toRefs, ref } from "vue";
import { useRouter } from "vue-router";
import { Toast } from "vant";
export default {
  setup() {
    let router = useRouter();
    const sign = ref(false);
    const my = reactive({
      tablist: [
        {
          id: 500,
          img: "../assets/img/bag.png",
          text: "我的背包",
        },
        {
          id: 501,
          img: "../assets/img/message.png",
          text: "消息中心",
        },
        {
          id: 502,
          img: "../assets/img/room.png",
          text: "我的收藏",
        },
        {
          id: 503,
          img: "../assets/img/feedback.png",
          text: "我的反馈",
        },
        {
          id: 504,
          img: "../assets/img/invite.png",
          text: "邀请好友",
        },
        {
          id: 505,
          img: "../assets/img/privacy.png",
          text: "监察举报",
        },
      ],
      userId: 1,//是否登录显示隐藏
      editId: 1,//主题切换
      phone: "",//手机号码
      code: "",//验证码
      password: "",//密码
      nownum: 0,//鲨粮
      bean: 0,//鲨豆
      name: 0,//名字
      textlist: [],
      flag: true,//签到
      flags: true,//补签到
      day: 0,//签到天数
    });
    let goMyBag = (item) => {
      router.push({
        path: "/mybag",
        query: {
          id: item.id,
        },
      });
    };
    const submit = () => {
      let reg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      //   let pass = /^[a-zA-Z0-9]\w{8,17}$/;
      if (!reg.test(my.phone)) {
        //不正确处理
        Toast("请输入正确的手机号码");
        return;
      } else {
        window.localStorage.setItem("textlist", JSON.stringify(my.textlist));
        window.localStorage.setItem("token", "token值");
        window.localStorage.setItem("name", "Mercurio");
        window.localStorage.setItem("hostshare", 0);
        window.localStorage.setItem("say", 0);
        window.localStorage.setItem("day", 0);
        window.localStorage.setItem("sex", "女");
        window.localStorage.setItem("birthday", "2022-11-09");
        window.localStorage.setItem("exceptional", false);
        window.localStorage.setItem("daily", false);
        window.localStorage.setItem("share", false);
        window.localStorage.setItem("watch", 0);
        Toast("登陆成功");
        router.push({ path: "/" });
      }
    };
    //退出登录
    const out = () => {
      window.localStorage.removeItem("token");
      Toast("退出登录");
      router.push({ path: "/" });
    };
    const signin = () => {
      sign.value = true;
    };
    const retroactive = () => {
      my.flags = false;
      (my.day += 1), (my.nownum += 50);
      window.localStorage.setItem("money", my.nownum);
      window.localStorage.setItem("retroactive", my.flags);
      window.localStorage.setItem("day", my.day);
      router.push({ path: "/myadvertis" });
    };
    //签到
    const immediately = () => {
      Toast("签到成功");
      my.flag = false;
      (my.day += 1), window.localStorage.setItem("day", my.day);
      window.localStorage.setItem("retroactives", my.flag);
      my.nownum += 60;
      window.localStorage.setItem("money", my.nownum);
    };
    // 主题切换
    const editArr = () => {
      if (my.editId == 1) {
        my.editId = 2;
        window.localStorage.setItem("editId", my.editId);
        Toast("切换成功");
      } else {
        my.editId = 1;
        window.localStorage.setItem("editId", my.editId);
        Toast("切换成功");
      }
    };
    onMounted(() => {
      my.editId = window.localStorage.getItem("editId");

      my.nownum = Number(window.localStorage.getItem("money"));
      my.bean = Number(window.localStorage.getItem("bean"));
      my.name = window.localStorage.getItem("name");
      my.day = Number(window.localStorage.getItem("day"));
      // console.log(my.name);
      if (!window.localStorage.getItem("token")) {
        my.userId = 1;
        return;
      } else {
        my.userId = 2;
      }
      if (!window.localStorage.getItem("retroactive")) {
        my.flags = true;
        return;
      } else {
        my.flags = false;
      }
      if (!window.localStorage.getItem("retroactives")) {
        my.flag = true;
        return;
      } else {
        my.flag = false;
      }
    });
    return {
      ...toRefs(my),
      goMyBag,
      submit,
      out,
      sign,
      signin,
      immediately,
      retroactive,
      editArr,
    };
  },
};
</script>
<template>
  <div class="container">
    <div :class="['my', { mys: editId == 2 }]" v-show="userId == 2">
      <van-sticky>
        <top-coms v-if="editId == 2"></top-coms>
        <top-com v-if="editId == 1"></top-com>
      </van-sticky>

      <!-- head -->
      <div class="head">
        <div class="user">
          <img src="../assets/img/user.jpg" />
          <div class="right">
            <span class="name">{{ name }}</span>
            <span :class="['grade', { grades: editId == 2 }]">Lv.1</span>
            <router-link custom to="/mychangeinfo" v-slot="{ href, navigate }">
              <div class="text" :href="href" @click="navigate">
                <span>查看或编辑个人资料</span>
                <i class="iconfont icon-xiayibu"></i>
              </div>
            </router-link>
          </div>
          <div class="edit" @click="editArr">
            <i :class="['iconfont', 'icon-theme', { con: editId == 2 }]"></i>
          </div>
        </div>
      </div>

      <div class="content">
        <!-- account -->
        <div class="account">
          <div class="balance">
            <div class="img">
              <img src="../assets/img/eat.png" alt="" />
            </div>
            <div class="text">鲨粮</div>
            <div class="eatnum">{{ nownum }}</div>
          </div>
          <div class="balance">
            <div class="img">
              <img src="../assets/img/eats.png" alt="" />
            </div>
            <div class="text">鲨豆</div>
            <div class="eatsnum">{{ bean }}</div>
          </div>
          <router-link custom to="/mybuy" v-slot="{ href, navigate }">
            <i :href="href" @click="navigate" class="iconfont icon-youbian"></i>
          </router-link>
        </div>

        <!-- handle -->
        <div class="handle">
          <router-link custom to="/mymissioncenter" v-slot="{ href, navigate }">
            <div class="item" :href="href" @click="navigate">
              <div class="img">
                <img src="../assets/img/security.png" alt="" />
                <span>任务中心</span>
              </div>
            </div>
          </router-link>
          <router-link custom to="/myluckydraw" v-slot="{ href, navigate }">
            <div class="item" :href="href" @click="navigate">
              <div class="img">
                <img src="../assets/img/help.png" alt="" />
                <span>幸运抽奖</span>
              </div>
            </div>
          </router-link>
          <div class="item" @click="signin">
            <div class="img">
              <img src="../assets/img/public.png" alt="" />
              <span>每日签到</span>
            </div>
          </div>
          <van-popup round v-model:show="sign">
            <div class="signin">
              <p class="title">每日签到</p>
              <p>
                你已经连续签到 <span class="num">{{ day }}</span> 天了
              </p>
              <div class="contents">
                <div class="items" :class="{ after: flags == false }">
                  <div class="top">
                    <!-- <router-link custom to="/myadvertis" v-slot="{ href, navigate }"> -->
                    <span @click="retroactive" v-show="flags">补签</span>
                    <span v-show="!flags">已签</span>
                    <!-- </router-link> -->
                  </div>

                  <div class="img">
                    <img src="../assets/img/eat.png" alt="" />
                  </div>
                  <p>+50</p>
                </div>
                <div class="items" :class="{ after: flag == false }">
                  <div class="top">
                    <span v-show="flag">未签</span
                    ><span v-show="!flag">已签</span>
                  </div>
                  <div class="img">
                    <img src="../assets/img/eat.png" alt="" />
                  </div>
                  <p>+60</p>
                </div>
                <div class="items">
                  <div class="top"><span>未签</span></div>
                  <div class="img">
                    <img src="../assets/img/eat.png" alt="" />
                  </div>
                  <p>+70</p>
                </div>
                <div class="items">
                  <div class="top"><span>未签</span></div>
                  <div class="img">
                    <img src="../assets/img/eat.png" alt="" />
                  </div>
                  <p>+80</p>
                </div>
                <div class="items">
                  <div class="top"><span>未签</span></div>
                  <div class="img">
                    <img src="../assets/img/eat.png" alt="" />
                  </div>
                  <p>+90</p>
                </div>
                <div class="items">
                  <div class="top"><span>未签</span></div>
                  <div class="img">
                    <img src="../assets/img/eat.png" alt="" />
                  </div>
                  <p>+100</p>
                </div>
                <div class="items">
                  <div class="top"><span>未签</span></div>
                  <div class="img">
                    <img src="../assets/img/eat.png" alt="" />
                  </div>
                  <p>+200</p>
                </div>
              </div>
              <p class="tips">别忘记了明天，连续签到可获得大量鲨粮</p>
              <p class="immediately" v-show="flag" @click.once="immediately">
                立即签到
              </p>
              <p class="immediatelys" v-show="!flag">您今天已签到</p>
            </div>
          </van-popup>
        </div>

        <div class="item">
          <ul>
            <li v-for="item in tablist" :key="item.id" @click="goMyBag(item)">
              <div class="img">
                <img :src="item.img" alt="" />
              </div>
              <span>{{ item.text }}</span>
              <i class="iconfont icon-youbian"></i>
            </li>
          </ul>

          <div class="line"></div>

          <ul>
            <li>
              <div class="img">
                <img src="../assets/img/bind.png" alt="" />
              </div>
              <span>帐号与绑定</span>
              <i class="iconfont icon-youbian"></i>
            </li>
            <li>
              <div class="img">
                <img src="../assets/img/privacy.png" alt="" />
              </div>
              <span>隐私政策</span>
              <i class="iconfont icon-youbian"></i>
            </li>

            <li @click="out">
              <div class="img">
                <img src="../assets/img/exit.png" alt="" />
              </div>
              <span>退出登录</span>
              <i class="iconfont icon-youbian"></i>
            </li>
          </ul>
        </div>
      </div>

      <bottom-com :tabId="(tabId = 5)" v-if="editId == 1"></bottom-com>
      <bottom-coms :tabId="(tabId = 5)" v-if="editId == 2"></bottom-coms>
    </div>

    <div class="logincode" v-show="userId == 1">
      <!-- 顶部 -->
      <div class="top">
        <div class="left">
          <i class="iconfont icon-zuobian"></i>
          <a @click="$router.go(-1)">返回</a>
        </div>
        <div class="center">登录</div>
        <div class="right">
          <i class="iconfont icon-people"></i>
          <router-link custom to="/register" v-slot="{ href, navigate }">
            <a :href="href" @click="navigate">注册</a>
          </router-link>
        </div>
      </div>

      <div class="content">
        <div class="logo">
          <img src="../assets/img/logo.png" alt="" />
        </div>

        <!--短信登录-->
        <div class="form">
          <div class="phonenum">
            <input
              type="text"
              autocomplete="off"
              name="phone"
              placeholder="请输入手机号或用户名"
              v-model="phone"
            />
            <em></em>
          </div>

          <!-- 验证码 -->
          <div class="get">
            <input
              type="text"
              autocomplete="off"
              name="code"
              placeholder="请输入短信验证码"
              v-model="code"
            />
            <i></i><span>获取验证码</span>
          </div>

          <button type="button" class="login" @click="submit">登录</button>

          <div class="login-other">
            <router-link custom to="/loginpsw" v-slot="{ href, navigate }">
              <div :href="href" @click="navigate" class="pswlogin">
                密码登录
              </div>
            </router-link>
          </div>
        </div>
      </div>

      <div class="footers">
        <div class="login-txt">
          <a class="feedback" href="">问题帮助</a>
          <a class="Jold_login" href="">旧版登录</a>
        </div>
        <p class="declare-txt">
          登录注册表示同意<a href="#">用户协议</a>和<a href="#">法律声明</a>
        </p>
      </div>
    </div>
  </div>
</template>


<style lang="scss" scoped>
// head
.my {
  background-color: #f9f8fd;
  padding-bottom: 95px;
  .head {
    height: 120px;
    padding: 28px 15px;
    border-radius: 8px;
    .user {
      display: flex;
      align-items: center;
      margin-left: 5px;
      img {
        vertical-align: middle;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin-right: 12px;
      }
      .right {
        .name {
          font-weight: bold;
          font-size: 20px;
          margin-right: 6px;
        }
        .grade {
          display: inline-block;
          background: linear-gradient(270deg, #7b0b3b 0%, #d51c78 100%);
          color: rgb(255, 255, 255);
          margin: 1px;
          font-weight: 600;
          font-size: 12px;
          border-radius: 2px;
          width: 40px;
          text-align: center;
        }
        .grades {
          background: linear-gradient(270deg, #8e4ff5 0%, #7172f7 100%);
        }
        .text {
          color: #787a82;
          font-size: 12px;
          margin-top: 6px;
          display: flex;
        }
      }
    }
  }
  .content {
    padding-left: 10px;
    padding-right: 10px;
    .account {
      //   height: 70px;
      padding: 20px 10px;
      display: flex;
      align-items: center;
      font-size: 14px;
      margin-bottom: 10px;
      background-color: #fff;
      border-radius: 8px;
      .balance {
        flex: 1;
        display: flex;
        align-items: center;
        img {
          margin-right: 4px;
        }
        .text {
          margin-right: 4px;
        }
        .eatnum {
          margin-top: 4px;
        }
        .eatsnum {
          margin-top: 4px;
        }
      }
    }
    .handle {
      margin-top: 10px;
      background-color: #fff;
      padding: 20px 10px;
      display: flex;
      font-size: 14px;
      color: #000;
      border-radius: 8px;
      .item {
        flex: 1;
        .img {
          display: flex;
          flex-direction: column;
          align-items: center;
          img {
            width: 24px;
            height: 24px;
            margin-bottom: 4px;
          }
        }
      }
      .signin {
        padding: 20px;
        .title {
          font-size: 20px;
          font-weight: bold;
          text-align: center;
          margin: 10px 0px;
        }
        p {
          text-align: center;
          .num {
            color: #d51c78;
          }
        }
        .contents {
          margin-top: 15px;
          width: 230px;
          display: flex;
          flex-wrap: wrap;
          .items {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 21%;
            padding: 6px;
            margin: 2%;
            background-color: pink;
            // margin-right: 11px;
            border-radius: 22px;
            margin-bottom: 15px;
            font-size: 12px;
            .top {
              margin: 2px 0px 6px;
              background-color: #fff;
              border-radius: 50%;
              padding: 8px 6px;
              color: #d51c78;
              // transform: scale(0.73, 0.73);
              span {
                font-size: 12px;
                // transform: scale(0.73, 0.73)
              }
            }
            .img {
              margin-bottom: 4px;
            }
            p {
              margin-bottom: 4px;
            }
          }
          .after {
            background-color: #d51c78;
          }
        }
        .tips {
          font-size: 12px;
          color: #bbbbbb;
          margin-bottom: 12px;
        }
        .immediately {
          background-color: #d51c78;
          padding-top: 10px;
          padding-bottom: 10px;
          color: #fff;
          border-radius: 20px;
        }
        .immediatelys {
          background-color: pink;
          padding-top: 10px;
          padding-bottom: 10px;
          color: #000;
          border-radius: 20px;
        }
      }
    }
    .item {
      background-color: #fff;
      margin-top: 10px;
      border-radius: 8px;
      li {
        display: flex;
        align-items: center;
        padding: 8px 0;
        color: #222;
        font-size: 15px;
        margin: 0 15px;
        border-bottom: 1px solid #eeeeee;
        &:last-child {
          border-bottom: none;
        }
        .img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin-bottom: 2px;
          img {
            width: 100%;
          }
        }
        span {
          flex: 1;
          margin-left: 8px;
        }
      }
    }
    .line {
      height: 10px;
      background-color: #f9f8fd;
    }
  }
}
.mys {
  padding-bottom: 60px;
}

/* 顶部 */
.logincode .top {
  height: 44px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  background: linear-gradient(270deg, #7b0b3b 0%, #d51c78 100%);
  color: #fff;
  padding-right: 10px;
  padding-left: 5px;
  .center {
    font-size: 19px;
    height: 44px;
    line-height: 44px;
  }
  .left {
    display: flex;
    align-items: center;
    a {
      display: inline-block;
      font-size: 14px;
      color: #fff;
    }
    i {
      margin-right: 2px;
    }
  }
  .right {
    display: flex;
    align-items: center;
    a {
      display: inline-block;
      font-size: 14px;
      color: #fff;
    }
    i {
      margin-right: 4px;
    }
  }
}

/* 内容 */
.logincode .content {
  padding-left: 45px;
  padding-right: 45px;
  padding-top: 65px;
  .logo {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-bottom: 54px;
    img {
      width: 100px;
      height: 100px;
    }
  }
}

/* 短信登录 */
.logincode .phonenum,
.logincode .get {
  height: 55px;
  font-size: 16px;
  border-bottom: 1px solid #f5f5f5;
}
.logincode .form {
  input {
    &::placeholder {
      color: #c4c4c4;
      font-size: 16px;
    }
  }
  .login {
    width: 100%;
    font-size: 18px;
    color: #fff;
    text-align: center;
    background: linear-gradient(to right, #7b0b3b, #d51c78, #7b0b3b);
    border: none;
    margin-top: 40px;
    height: 40px;
    border-radius: 20px;
    letter-spacing: 3px;
  }
}
.logincode .phonenum {
  display: flex;
  justify-content: space-between;
  align-items: center;
  input {
    flex: 1;
    height: 55px;
    line-height: 55px;
  }
  em {
    display: inline-block;
    background: url(../assets/img/clear.png) no-repeat;
    width: 18px;
    height: 18px;
    background-size: 100%;
  }
}
.logincode .get {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  input {
    flex: 1;
    height: 55px;
    width: 150px;
    line-height: 55px;
    margin-top: 2px;
  }
  i {
    display: inline-block;
    width: 1px;
    height: 20px;
    background-color: #e6e6e6;
    margin-right: 12px;
  }
  span {
    color: #d51c78;
  }
}
.logincode .login-other {
  display: flex;
  justify-content: space-between;
}
.logincode .login-other .pswlogin,
.logincode .login-other .forgotpsw {
  display: block;
  padding-top: 13px;
  padding-bottom: 13px;
  font-size: 12px;
  color: #aaaaaa;
}

.logincode .footers {
  .login-txt {
    display: flex;
    justify-content: center;
    a {
      display: inline-block;
      padding: 13px 14px;
      font-size: 14px;
      color: #d51c78;
    }
  }
}
.logincode .declare-txt {
  text-align: center;
  font-size: 12px;
  color: #888;
  a {
    display: inline-block;
    font-size: 12px;
    color: #888;
    text-decoration: underline;
  }
}

// 主题修改
.edit {
  text-align: right;
  width: 128px;
  .iconfont {
    font-size: 30px;
    color: #d51c78;
  }
  .con {
    font-size: 30px;
    color: #8e4ff5;
  }
}
</style>